<template>
	<!--头部-->
	<div class="vue_app" style="position: relative;width: 100%">
		<my-header :title="'商品评价'" :hasTitle="true" :hasBack="true"></my-header>
		<!--<div class="centent top_div" style="margin: 0;">
			<div class="aui-content">-->
		<div style="overflow: hidden;" :style="`height: ${screenHeight}px`">
			<translate-main ref='verticalScroll'>
				<ul class="aui-list aui-media-list commodity_list subtotal_list" style="padding-bottom: 2.5rem;">
					<li class="aui-list-item item_0" v-for="(item,index) in goods" :key="index">
						<div class="aui-media-list-item-inner" >
							<div class="aui-list-item-media">
								<img :src="item.goodsImg || 'static/image/demo2.png'">
							</div>
							<div class="aui-list-item-inner tp_left">
								<h3>{{item.goodsName}}</h3>
								<p v-if="item.goodsSpec">规格：{{item.goodsSpec}}</p>
								<p>¥{{Number(item.realPrice).toFixed(2)}}/{{item.goodsUnit}}</p>

							</div>
							<div class="aui-list-item-inner aui-list-item-inner_1" >
								<i class="icon njfont nj-dianzan" :ref="'flagT' + index" @click="clickFlag(index,true)" style="color:#f00"></i>
								<i class="icon njfont nj-cai" :ref="'flagF' + index"  @click="clickFlag(index,false)"></i>
							</div>
						</div>
						<!-- 评论 -->
						<div class="comment_con">
							<div v-if="item.flag " class="par_comment">
								<p :ref="index" v-for="(val,num) in item.comment_1 " @click="commentTar(val,num,index)" :key='num'>{{val}}</p>
							</div>
							<div v-else class="par_comment">
								<p :ref="index" v-for="(val,num) in item.comment_2 " @click="commentTar(val,num,index)" :key='num'>{{val}}</p>
							</div>
							<div class="say">
								<textarea style="height: 3.5rem;color:#999" id="" cols="20" rows="30" placeholder="商品满足你的期待吗？说说它的优点和美中不足吧。（200字以内）" maxlength="200" v-model="item.commentContent" @input="commentSurplus">
								</textarea>
								<span class="sur">{{Surplus}}/200</span>
							</div>
						</div>
						<!-- 上传图片 -->
						<div class="upload_img" v-if="showImg" style="background-repeat: unset;background-color: #fff;background-image: none;">
							<img-UpLoad ref="imgUp" :maxCount="5" :customFn="getImgUrl" :toast="false" :autoClear="false" style="background-color: #fff;background-image: none;"></img-UpLoad>
						</div>
					</li>
				</ul>
			</translate-main>
		</div>
		<!--</div>
		</div>-->
		<div style="height: 2.5rem;padding: 0px;border-radius: 0px;" class="aui-btn aui-btn-block aui-btn-danger settle_accounts fixed_div aui-card-list-content-padded aui-border-t">
			<div @click="submit" style="height: 2.5rem;line-height: 2.5rem;font-size: 1rem;">提交</div>
		</div>

	</div> 
</template>

<script>
	import Vue from 'vue'
	import VueClip from 'vue-clip';
	import axios from 'axios';
	import MyHeader from "../header";
	import { Toast } from '../../utils/toast.js';
	//import ImgUpLoader from '../../utils/ImgUpload/index.vue';
	import ImgUpLoader from '../../real-components/ImgUpload';
	import { selectCommentConfig, saveGoodsComment } from '../../api/wxh/getData.js';
	import TranslateMain from '../../real-components/VerticalScroll';
	import { mapGetters, mapMutations } from "vuex";
	Vue.use(VueClip);
	export default {
		data() {
			return { 
				options: {
					url: '/upload',
					paramName: 'file',
					maxFilesize: 1,
					maxFiles: 5,
				},
				files: [],
				goods: [],
				comment_1: '',
				comment_2: '',
				// flag: true,
				commentTarget: [],
				commentContent: '',
				showImg: '', //是否可以上传图片
				Surplus: 0,
				flagclick: false,
			}
		},
		beforeCreate() {
		},
		components: {
			"imgUpLoad": ImgUpLoader,
			"my-header": MyHeader,
			"translate-main": TranslateMain,
		},
		mounted() {
			this.initData();
		},
		computed: {
			screenHeight() {
				return window.innerHeight - '80';
			},
			...mapGetters('xxy', [
				"getevaluateGoods"
			]),
			...mapGetters('lyj', [
				"itemQuery"
			]),

		},
		methods: {
			...mapMutations('xxy', [
				"setevaluateGoods"
			]),
			async initData() {
				this.goods = this.itemQuery;
				
				console.log(this.goods,'this.goods1234')

				let res = await selectCommentConfig();
				console.log(res,'res')
				this.showImg = res.data[0].showImage;
				let con = res.data[0].goodsCommentConfigsList;
				this.comment_1 = con[0].goodsCommentTarget.split('，');
				this.comment_2 = con[1].goodsCommentTarget.split('，');
				
				this.goods = this.goods.map(item => {
					return Object.assign({}, item, {
						CommentArray: [],
						commentContent:'',
						imageList: '',
						flag: true,
						comment_1: this.comment_1,
						comment_2: this.comment_2
					});
				});
			},
			clickFlag(index,bool) {
				this.$refs[index].forEach(function(ind,value) {
					ind.style.color = "#908f8f";
				})
				this.goods[index].CommentArray = []			

				if (bool) {
					this.goods[index].flag = true;
					this.$refs['flagT'+index].forEach(function(val,index) {
						console.log(val,'val')
						val.style.color = "red"
					})
					this.$refs['flagF'+index].forEach(function(val,index) {
						val.style.color = "#908f8f"
					})
				} else {
					this.goods[index].flag = false
					this.$refs['flagT'+index].forEach(function(val,index) {
						console.log(val,'val')
						val.style.color = "#908f8f"
					})
					this.$refs['flagF'+index].forEach(function(val,index) {
						val.style.color = "red"
					})
					
				}
			},
			commentTar(val,num,index) {
				console.log(index,'index')
				console.log(this.goods,'this.goods888')	
				if (this.goods[index].CommentArray.includes(val)) {
					this.goods[index].CommentArray.splice(this.goods[index].CommentArray.indexOf(val), 1);
					this.$refs[index].forEach(function(ind,value) {
						if(ind.innerHTML == val) {
							ind.style.color = "#908f8f";
						}
					})
				
				} else {
					this.goods[index].CommentArray.push(val)
					this.$refs[index].forEach(function(ind,value) {
						if(ind.innerHTML == val) {
							ind.style.color = "#38b035";
						}
					})
				}	
				console.log(this.goods[index].CommentArray,'commentArray');
				
			},
			async submit() {
				this.goods.forEach((item) =>{
					if (item.CommentArray.length == 0) {
						this.flagclick = false
					} else {
						this.flagclick = true
					}
				})
				if (!this.flagclick) {
					Toast({
						message: "请选择标签！",
						duration: 2000,
						type: 'warn'
					});
					return;
				}
				let commentGoodsList = this.goods.map(async (item, index) => {

					let urlArr = await this.$refs.imgUp[index].upload();
					let urlData = urlArr.data.join(",");
					// console.log("拿到上传的图片链接-->", urlData);
					return {
						goodsName:item.goodsName,
						goodsId:item.goodsId,
						goodsCode:item.goodsCode,
						buyType:item.buyType,
						commentContent:item.commentContent,
						comment:item.flag ? "赞" : "踩",
						commentTarget:item.CommentArray.join(),
						imageList: urlData
					}
				});
				commentGoodsList = await Promise.all(commentGoodsList);
				console.log("commentGoodsList", commentGoodsList);
				// return;
				let config1 = {'commentGoodsList':commentGoodsList}
				let config = Object.assign(this.$route.query,config1)
				console.log(config,'config')

				let req = await saveGoodsComment(config);
				if(req.returnCode == 1) {
					this.$router.push({
						path: "order",
						query: {
							orderStatus: 4
						}
					});
				}
				
				
			},
			getImgUrl(res) {
				console.log(res,'图片上传')
			},
			upLoadImg(index) {
				console.log(this.$refs['imgUp'+index],'666')
				this.$refs['imgUp'+index][0].upload();
			},
			commentSurplus() {
				this.Surplus = (this.commentContent.length >0) ? (200 - this.commentContent.length) : 0 ;
			}
		},
		watch: {
			goods(data){
				console.log(data,'data')
			}
		}
	}
</script>

<style scoped>
	.vue_app {
		background: #fff;
		height: 100%;
	}
	
	.aui-list-item {
		padding-right: 0.75rem;
		border-bottom: 0.7rem solid #efefef;
	}
	.aui-list-item:nth-last-of-type(1) {
		border: none;
	}
	/*.item_0>div {
		border-bottom: 1px solid #ccc;
	}*/
	
	textarea {
		height: 7rem;
		border: 1px solid #eee;
		padding: 0.5rem;

	}

	
	.par_comment {
		display: flex;
		flex-direction: row;
		font-size: 16px;
		flex-wrap: wrap;
	}
	
	.par_comment>p {
		width: auto;
		height: auto;
		border-radius: 3px;
		font-size: 0.6rem;
		border: 1px solid #bbb;
		color: #999;
		padding: 0.1rem 0.2rem;
		margin:0 0.3rem 0.2rem 0
	}
	.par_comment .blue {
		color: #38b035;
		border: 1px solid #38b035;
	}
	.aui-list-item-media {
		/*width: 33%;
		height: 5rem;*/
		margin: 0.25rem 0;
	}
	
	.aui-list-item-inner {
		text-align: left;
		margin-left: 1rem;
		line-height: 1rem;
	}
	.aui-list-item-inner.tp_left {
		width: 50%;
	}
	.aui-list-item-inner.tp_left h3 {
		color: #333;
		font-size: 0.7rem;
		margin-bottom: 0.3rem;
	}
	.aui-list-item-inner.tp_left p {
		font-size: 0.5rem;
	}
	.aui-list-item-inner_1 {
		text-align: center;
		/*padding-top: 2rem; */
		display: flex;
		width: 20%;
		position: absolute;
		right: 0;
		top: 1rem;
		padding-right: 0.75rem;
	}
	
	.sur {
		position: absolute;
		bottom: 0.5rem;
		right: 1rem;
		color: #ccc;
		font-size: 0.6rem;
	}
	
	.evaImg {
		display: inline-block;
		width: 2rem;
		height: 2rem;
	}
	/*.settle_accounts {
		position: static;
		border-top: 0px;
	}*/
	
	.aui-list-item.item_1>h3 {
		text-align: left;
		height: 1.5rem;
		line-height: 1.5rem;
	}
</style>